<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Flex弹性盒模型</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="flex.css">

    <body>
        <main>
            <section>

                <div class="face">
                    <span class="pip"></span>
                </div>

                <div class="face" style=' justify-content: center;'>
                    <span class="pip"></span>
                </div>

                <div class="face" style=' justify-content: flex-end;'>
                    <span class="pip"></span>
                </div>

                <div class="face" style='align-items: center;'>
                    <span class="pip"></span>
                </div>

                <div class="face" style='  justify-content: center; align-items: center;'>
                    <span class="pip"></span>
                </div>

                <div class="face" style='  justify-content: center; align-items:  flex-end;'>
                    <span class="pip"></span>
                </div>

                <div class="face" style='  justify-content: flex-end; align-items:  flex-end;'>
                    <span class="pip"></span>
                </div>

            </section>
            <section>
                <div class="face" style='justify-content: space-between;'>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>

                <div class="face" style='flex-direction: column;justify-content: space-between;'>
                                                                          
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>

                <div class="face" style='flex-direction: column;
                justify-content: space-between;
                align-items: center;'>
                    <span class="pip"></span>
                    <span class="pip"></span>
                </div>

                <div class="face" style='flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;'>
                <span class="pip"></span>
                <span class="pip"></span>
            </div>

            <div class="face" style=''>
                    <span class="pip"></span>
                    <span class="pip" style='align-self: center;'></span>
                </div>

                <div class="face" style='justify-content: space-between;'>
                        <span class="pip"></span>
                        <span class="pip" style='align-self: flex-end;'></span>
                    </div>

            </section>

            <section>
                        <div class="face" style=''>
                            <span class="pip"></span>
                            <span class="pip" style='align-self: center;'></span>
                            <span class="pip" style='align-self: flex-end;'></span>
                         </div>

                        <div class="face" style='flex-wrap: wrap;align-content: space-between;'>
                            <div class="column" style='flex-basis: 100%; display: flex; justify-content: space-between;'>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                              </div>
                              <div class="column" style='flex-basis: 100%;display: flex;    justify-content: space-between;'>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                              </div>
                        </div>

                        <div class="face" style='flex-wrap: wrap;
                                align-content: space-between;'>
                                <span class="pip"></span>
                                <span class="pip"></span>
                                <span class="pip"></span>
                                <span class="pip"></span>
                                <span class="pip"></span>
                                <span class="pip"></span>
                             </div>

                             <div class="face" style='flex-direction: column;
                             flex-wrap: wrap;
                             align-content: space-between;'>
                             <span class="pip"></span>
                             <span class="pip"></span>
                             <span class="pip"></span>
                             <span class="pip"></span>
                             <span class="pip"></span>
                             <span class="pip"></span>
                          </div>


                          <div class="face" style='flex-wrap: wrap;align-content: space-between;'>
                                <div class="column" style='flex-basis: 100%;
                                display:flex;'>
                                        <span class="pip"></span>
                                        <span class="pip"></span>
                                        <span class="pip"></span>
                                  </div>
                                  <div class="column" style='flex-basis: 100%;
                                  display:flex;justify-content: center;'>
                                        <span class="pip"></span>
                                  </div>
                                  <div class="column" style='flex-basis: 100%;
                                  display:flex;justify-content: space-between;'>
                                        <span class="pip"></span>
                                        <span class="pip"></span>
                                  </div>
                            </div>

                            <div  class="face" style='flex-wrap: wrap;'>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                                    <span class="pip"></span>
                            </div>


            </section>
        </main>
    </body>

</html>